import {
  FamilyInfo,
  FamilyRecordDailyCount,
  FamilyReportInfo,
  queryDailyRecordCount,
  queryFamilyReportPage
} from '@/services/family/api';
import {ProColumnType, ProTable} from '@ant-design/pro-components';
import {Button, Modal} from 'antd';
import to from 'await-to-js';
import {marked} from 'marked';
import {type FC, useState} from 'react';
import {getCurrentDateTimeString, htmlToPdf} from "@/common/util";

import './record-count-modal.scss';

type ReportGenerateModalProps = {
  modalVisible: boolean;
  onOpenChange: (open: boolean) => void;
  familyInfo: FamilyInfo | undefined;
};

// export interface ReportListReqParam {
//   familyId?: number;
//   page?: number;
//   size?: number;
// }

const ReportListModal: FC<ReportGenerateModalProps> = (props) => {
  const {modalVisible, onOpenChange, familyInfo} = props;

  const params = {
    familyId: familyInfo?.id,
  };

  const columns: ProColumnType<FamilyRecordDailyCount>[] = [
    {
      title: '序号',
      dataIndex: 'index',
      key: 'index',
      render: (text, record, index) => index + 1,
    },
    {
      title: '日期',
      dataIndex: 'date',
      render: (_, record) => {
        return (
          <>
            {new Date(record.date).toLocaleDateString()}
          </>
        );
      }
    },
    {
      title: '聊天记录数',
      dataIndex: 'count',
      render: (_, record) => {
        return (
          <span style={{color: record.count > 30 ? 'green' : 'red'}}>
            {record.count}
          </span>
        );
      }
    }
  ];

  if (!modalVisible) {
    return null;
  }

  return (
    <>
      <Modal
        title={`家庭【${familyInfo?.name}(${familyInfo?.code})】的聊天数日报表`}
        open={modalVisible}
        onCancel={() => {
          onOpenChange(false);
        }}
        width={680}
        centered={true}
        style={{
          maxHeight: '90%',
          overflowY: 'auto',
        }}
        destroyOnClose={true}
        footer={null}
      >
        <ProTable
          toolBarRender={false}
          defaultSize="small"
          rowKey={'id'}
          columns={columns}
          // params 是需要自带的参数
          // 这个参数优先级更高，会覆盖查询表单的参数
          params={params}
          // 第一个参数 params 查询表单和 params 参数的结合
          // 第一个参数中一定会有 pageSize 和  current ，这两个参数是 antd 的规范
          request={async () => {
            // 这里需要返回一个 Promise,在返回之前你可以进行数据转化
            // 如果需要转化参数可以在这里进行修改
            const [err, baseResponse] = await to(queryDailyRecordCount(familyInfo?.id));
            if (err) {
              return {data: [], success: false};
            }
            return {data: baseResponse?.result, success: baseResponse?.code === '0'};
          }}
          pagination={false}
          search={false}
          debounceTime={100}
        />
      </Modal>
    </>
  );
};

export default ReportListModal;
